import React, { Component, createRef } from 'react'
import netmap from './index.module.css'
import { result } from '../../mock/result'

import three_parts_icon from '../../asserts/images/three_parts_icon.png' // 三庭
import three_parts_icon_active from '../../asserts/images/three_parts_icon_active.png' // 三庭

import five_eyes_icon from '../../asserts/images/five_eyes_icon.png' // 五眼
import five_eyes_icon_active from '../../asserts/images/five_eyes_icon_active.png' // 五眼

import face_icon from '../../asserts/images/face_icon.png'  // 脸部
import face_icon_active from '../../asserts/images/face_icon_active.png'  // 脸部

import golden_triangle_icon from '../../asserts/images/golden_triangle_icon.png' // 黄金三角
import golden_triangle_icon_active from '../../asserts/images/golden_triangle_icon_active.png' // 黄金三角

import eyebrow_icon from '../../asserts/images/eyebrow_icon.png' // 眉毛
import eyebrow_icon_active from '../../asserts/images/eyebrow_icon_active.png' // 眉毛

import eyes_icon from '../../asserts/images/eyes_icon.png' // 眼睛
import eyes_icon_active from '../../asserts/images/eyes_icon_active.png' // 眼睛

import nose_icon from '../../asserts/images/nose_icon.png' // 鼻子
import nose_icon_active from '../../asserts/images/nose_icon_active.png' // 鼻子

import mouth_icon from '../../asserts/images/mouth_icon.png' // 嘴唇
import mouth_icon_active from '../../asserts/images/mouth_icon_active.png' // 嘴唇

import jaw_icon from '../../asserts/images/jaw_icon.png' // 下巴
import jaw_icon_active from '../../asserts/images/jaw_icon_active.png' // 下巴


import three_parts from '../../asserts/images/three_parts.png' // 三庭
import five_eyes from '../../asserts/images/five_eyes.png' // 五眼
import face from '../../asserts/images/face.png'  // 脸部
import golden_triangle from '../../asserts/images/golden_triangle.png' // 黄金三角
import eyebrow from '../../asserts/images/eyebrow.png' // 眉毛
import eyes from '../../asserts/images/eyes.png' // 眼睛
import nose from '../../asserts/images/nose.png' // 鼻子
import mouth from '../../asserts/images/mouth.png' // 嘴唇
import jaw from '../../asserts/images/jaw.png' // 下巴


import { threePartsResult, fiveEyesResult, faceResult, eyebrowResult, eyesResult, noseResult, mouthResult, jawResult } from '../../asserts/js/facial_parts_result'

let tabLabel = [
  {key: 1, label: "三庭", icon: three_parts_icon, active_icon: three_parts_icon_active},
  {key: 2, label: "五眼", icon: five_eyes_icon, active_icon: five_eyes_icon_active},
  {key: 3, label: "脸部", icon: face_icon, active_icon: face_icon_active},
  {key: 4, label: "黄金三角", icon: golden_triangle_icon, active_icon: golden_triangle_icon_active},
  {key: 5, label: "眉毛", icon: eyebrow_icon, active_icon: eyebrow_icon_active},
  {key: 6, label: "眼睛", icon: eyes_icon, active_icon:eyes_icon_active},
  {key: 7, label: "鼻子", icon: nose_icon, active_icon: nose_icon_active},
  {key: 8, label: "嘴唇", icon: mouth_icon, active_icon: mouth_icon_active},
  {key: 9, label: "下巴", icon: jaw_icon, active_icon: jaw_icon_active}
]

export default class index extends Component {
  constructor(props){
    super(props)
    this.state = {
      currentTabIndex: 0,
      scrollTabs: null
    }
  }

  componentDidMount() {
    const scrollTabs = document.getElementById('scroll-tabs');
    if (scrollTabs) {
      scrollTabs.addEventListener('wheel', this.handleElementWheelScroll);
      this.setState({
        scrollTabs
      })
    }

  }

  handleElementWheelScroll = (event) => {
    if (event.wheelDelta > 0) { //上滚    
      this.state.scrollTabs.scrollLeft -= 10;
    }else if (event.wheelDelta<=0){ //下滚
      this.state.scrollTabs.scrollLeft += 10;
    }
  }


  componentWillUnmount() {
    if (this.state.scrollTabs) {
      this.state.scrollTabs.removeEventListener('wheel', this.handleElementWheelScroll);
    }
  }


  componentDidUpdate(){
    
  }

  onTabItemClick = (e) => {
    this.setState({
      currentTabIndex: e
    }, () => {
      if (e > Math.floor(tabLabel.length / 2)) {
        this.state.scrollTabs.scrollLeft += 160;
      }else if(e < Math.round(tabLabel.length / 2)){
        this.state.scrollTabs.scrollLeft -= 160;
      }
    })
  }

  // 数据整理
  transformData = (result) => {
    let finallResult = []
    let data = result.result
    // console.log(data);
  
    finallResult = [
      {
        title:'三庭', 
        items: [
          {label: '三庭比例', value: data.three_parts.parts_ratio},
          {label: '上庭长度（单位：mm）', value: data.three_parts.one_part.faceup_length},
          {label: '上庭占比', value: data.three_parts.one_part.faceup_ratio},
          {label: '上庭判断结果', value: data.three_parts.one_part.faceup_result ? threePartsResult[data.three_parts.one_part.faceup_result] : ''},
          {label: '中庭长度（单位：mm）', value: data.three_parts.two_part.facemid_length},
          {label: '中庭占比', value: data.three_parts.two_part.facemid_ratio},
          {label: '中庭判断结果', value: data.three_parts.two_part.facemid_result ? threePartsResult[data.three_parts.two_part.facemid_result] : ''},
          {label: '下庭长度（单位：mm）', value: data.three_parts.three_part.facedown_length},
          {label: '下庭占比', value: data.three_parts.three_part.facedown_ratio},
          {label: '下庭判断结果', value: data.three_parts.three_part.facedown_result ? threePartsResult[data.three_parts.three_part.facedown_result] : ''},
        ],
        img: three_parts,
        className: 'three_parts',
      },
      {
        title:'五眼', 
        items: [
          {label: '五眼比例', value: data.five_eyes.eyes_ratio},
          {label: '右眼外侧留白距离（单位：mm）', value: data.five_eyes.one_eye.righteye_empty_length},
          {label: '右眼外侧留白占比', value: data.five_eyes.one_eye.righteye_empty_ratio},
          {label: '右眼外侧留白判断结果', value: data.five_eyes.one_eye.righteye_empty_result ? fiveEyesResult[data.five_eyes.one_eye.righteye_empty_result] : ''},
          {label: '右眼宽度（单位：mm）', value: data.five_eyes.righteye},
          {label: '内眼角间距（单位：mm）', value: data.five_eyes.three_eye.eyein_length},
          {label: '内眼角占比', value: data.five_eyes.three_eye.eyein_ratio},
          {label: '内眼角间距判断结果', value: data.five_eyes.three_eye.eyein_result ? fiveEyesResult[data.five_eyes.three_eye.eyein_result] : ''},
          {label: '左眼宽度（单位：mm）', value: data.five_eyes.lefteye},
          {label: '左眼外侧留白距离（单位：mm）', value: data.five_eyes.five_eye.lefteye_empty_length},
          {label: '左眼外侧留白占比', value: data.five_eyes.five_eye.lefteye_empty_ratio},
          {label: '左眼外侧留白判断结果', value: data.five_eyes.five_eye.lefteye_empty_result ? fiveEyesResult[data.five_eyes.five_eye.lefteye_empty_result] : ''},
        ],
        img: five_eyes,
        className: 'five_eyes'
      },
      {
        title:'脸部', 
        items: [
          {label: '脸部长度（单位：mm）', value: data.face.face_length},
          {label: '颞部宽度（单位：mm）', value: data.face.tempus_length},
          {label: '颧骨宽度（单位：mm）', value: data.face.zygoma_length},
          {label: '下颌角宽度（单位：mm）', value: data.face.mandible_length},
          {label: '下颌角度数（单位：°）', value: data.face.E},
          {label: '颞部宽度：颧骨宽度：下颌角宽度', value: data.face.ABD_ratio},
          {label: '脸型判断结果', value: data.face.face_type ? faceResult[data.face.face_type] : ''},
        ],
        img: face,
        className: 'face',
      },
      {
        title:'黄金三角', 
        items: [
          {label: '黄金三角度数（单位：°）', value: data.golden_triangle},
        ],
        img: golden_triangle,
        className: 'golden_triangle',
      },
      {
        title:'眉毛', 
        items: [
          {label: '眉毛高度（单位：mm）', value: data.eyebrow.brow_height},
          {label: '眉毛宽度（单位：mm）', value: data.eyebrow.brow_width},
          {label: '眉毛粗细（单位：mm）', value: data.eyebrow.brow_thick},
          {label: '眉毛挑度（单位：°）', value: data.eyebrow.brow_uptrend_angle},
          {label: '眉毛弯度（单位：°）', value: data.eyebrow.brow_camber_angle},
          {label: '眉型判断结果', value: data.eyebrow.eyebrow_type ? eyebrowResult[data.eyebrow.eyebrow_type] : ''},
        ],
        img: eyebrow,
        className: 'eyebrow',
      },
      {
        title:'眼睛', 
        items: [
          {label: '眼睛高度（单位：mm）', value: data.eyes.eye_height},
          {label: '眼睛宽度（单位：mm）', value: data.eyes.eye_width},
          {label: '内眦角度数（单位：°）', value: data.eyes.angulus_oculi_medialis},
          {label: '眼型判断结果', value: data.eyes.eyes_type ? eyesResult[data.eyes.eyes_type] : ''},
        ],
        img: eyes,
        className: 'eyes',
      },
      {
        title:'鼻子', 
        items: [
          {label: '鼻翼宽度（单位：mm）', value: data.nose.nose_width},
          {label: '鼻子判断结果', value: data.nose.nose_type ? noseResult[data.nose.nose_type] : ''},
        ],
        img: nose,
        className: 'nose',
      },
      {
        title:'嘴唇', 
        items: [
          {label: '嘴唇高度（单位：mm）', value: data.mouth.mouth_height},
          {label: '嘴唇宽度（单位：mm）', value: data.mouth.mouth_width},
          {label: '嘴唇厚度：（上唇厚度+下唇厚度）/2', value: data.mouth.lip_thickness},
          {label: '嘴角弯曲度（单位：°）', value: data.mouth.angulus_oris},
          {label: '鼻子判断结果', value: data.mouth.mouth_type ? mouthResult[data.mouth.mouth_type] : ''},
        ],
        img: mouth,
        className: 'mouth',
      },
      {
        title:'下巴', 
        items: [
          {label: '下巴长度（单位：mm）', value: data.jaw.jaw_length},
          {label: '下巴宽度（单位：mm）', value: data.jaw.jaw_width},
          {label: '下巴角度（单位：°）', value: data.jaw.jaw_angle},
          {label: '下巴判断结果', value: data.jaw.jaw_type ? jawResult[data.jaw.jaw_type] : ''},
        ],
        img: jaw,
        className: 'jaw',
      },
    ]

    return finallResult;
  }

  render() {
    const { currentTabIndex } = this.state
    // console.log(this.props.result);
    let transformFinallData = []
    // let transformFinallData = this.transformData(result)

    if (JSON.stringify(this.props.result) !== '{}') {
      transformFinallData = this.transformData(this.props.result)
      // console.log(transformFinallData);
    }

    return (
      <div className={netmap.container}>
        <div className={netmap.container_top}>分析结果</div>
        <div className={netmap.container_main}>
          <div className={netmap.container_tabs_wrap}>
            <div id="scroll-tabs" className={netmap.container_tabs}>
              {
                tabLabel.map((item, index) => {
                  return (
                    <div 
                      key={index} 
                      className={`${netmap.container_tab_item} ${currentTabIndex === index ? netmap.container_tab_item_active : ''}`}
                      onClick={() => this.onTabItemClick(index)}
                    >
                      <img src={currentTabIndex === index ? item.active_icon : item.icon} alt={item.label} />
                      <span>{item.label}</span>
                    </div>
                  )
                })
              }
            </div>
          </div>
          <div className={netmap.container_wrap}>
            <div className={netmap.container_item}>
              {
                transformFinallData[currentTabIndex] ? 
                  <div className={netmap.container_item_wrap}>
                    <div className={netmap.container_item_content}>
                      <h2>{transformFinallData[currentTabIndex].title}</h2>
                      <ul>
                        {
                          transformFinallData[currentTabIndex].items.map((subItem, subIndex) => {
                            return (
                              <li key={subIndex}>
                                <span className={netmap.label}>{subItem.label}:</span>
                                <span className={`${netmap.label} ${netmap.value}`}>{subItem.value}</span>
                              </li>
                            )
                          })
                        }
                      </ul>
                    </div>
                    <div className={netmap.result_img_wrap}>
                      <img src={transformFinallData[currentTabIndex].img} alt={transformFinallData[currentTabIndex].title} />
                    </div>
                  </div>
                :
                <div className={netmap.no_result_wrap}>
                  <p>暂无{tabLabel[currentTabIndex].label}检测结果，请拍照提交检测</p>
                </div>
              }
            </div>
          </div>
        </div>
      </div>
    )
  }
}
